



// Props 属性  
// State 数据状态 
/*
1. react 数据传递载体  props 属性  state 状态  组件之间数据交互  

2. props
a.  props 默认从组件外部（父组件）传入,props 也能在组件内部初始化定义 
b.  组件内部 通过生命周期钩子函数    App.defaultProps = {} 内部定义props 
c.  props 一般不允许被修改   props 只用来传递数据  read-only 
d.  props 接收  对象 常量 函数  数组  
e.  props 在组件内部 通过 this.props 来获取  key-value   纯函数组件 对象解构获取props 
*/ 

// PropTypes  校验Props 
// optionalArray: PropTypes.array,
// optionalBool: PropTypes.bool,
// optionalFunc: PropTypes.func,
// optionalNumber: PropTypes.number,
// optionalObject: PropTzaypes.object,
// optionalString: PropTypes.string,
// optionalSymbol: PropTypes.symbol,

// 校验 props 接收正确的格式类型的数据 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import MyBtn from './MyBtn'

let word = "React 组件通信 props+state "
let userObj = {
    name:'zkl',
    age:18,
    sex:1,
    avatar:"xxxxx"
}
class MyProps extends Component {
    render() {
        return (
            <div>
                <h2>MyProps - Props - 属性 </h2>
                <hr/>
                <MyChild {...userObj}  userObj={userObj} msg="Hello React + Props "  count={3800}  word={word} ></MyChild>
                <hr/>
                <MyChildTwo {...userObj}  userObj={userObj} msg="Hello React + Props " count={3800}  word={word}  ></MyChildTwo>
            </div>
        );
    }
}

class MyChild extends Component{

    // 修改 props
    changeCount=()=>{
        this.props.count++
    }

    render(){
        console.log(this)
        const { msg, count , word , userObj , age  }  = this.props 

        return (
            <div>
                <h2> MyChild - MyChild - 1 </h2>
                <h3>props === 数据</h3>
                <h3>msg = {msg} </h3>
                <h3 onClick={this.changeCount}>count = {count } </h3>
                <h3> word= {word} </h3>
                <h3> uname = {userObj.name }</h3>
                <h3>uage = { age } </h3>
                <MyBtn text='操作'></MyBtn>
            </div>
        )
    }
}

// props 的默认值  
MyChild.defaultProps = {
    word:"Are you OK????",
    count:2217 
}

// props 的类型校验 
MyChild.propTypes = {
    count:PropTypes.number.isRequired,
    word:PropTypes.string.isRequired,
    userObj:PropTypes.object.isRequired 
}

// 纯函数组件 
const MyChildTwo = ({
    word,
    count,
    age,
    userObj,
    msg 
})=>{
    
    return (
        <div>
            <h2> MyChildTwo - MyChildTwo </h2>
            <h3>msg = {msg} </h3>
            <h3 >count = {count } </h3>
            <h3> word= {word} </h3>
            <h3> uname = {userObj.name }</h3>
            <h3>uage = { age } </h3>
        </div>
    )
}


// props 的默认值  
MyChildTwo.defaultProps = {
    word:"Are you OK????",
    count:2217 
}

// props 的类型校验 
MyChildTwo.propTypes = {
    count:PropTypes.number.isRequired,
    word:PropTypes.string.isRequired,
    userObj:PropTypes.object.isRequired 
}

export default MyProps;
